<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="cr-dialog-backdrop.html">
<link rel="import" href="cr-keyboard.html">

<polymer-element name="cr-dialog" extends="dialog">
    <template>
        <style>
        :host(.polyfill) {
            position: absolute;
            top: 100px;
            left: 0;
            right: 0;
            width: -webkit-fit-content;
            height: -webkit-fit-content;
            margin: auto;
            background: white;
            z-index: 100;
        }

        :host(.polyfill:not([open])) {
            display: none;
        }
        </style>
        <content></content>
        <template if="{{ isPolyfill && open }}">
            <cr-keyboard on-key-escape="{{ fireCancelEvent }}"></cr-keyboard>
        </template>
    </template>
    <script>
    (function() {
        var backdrop = document.createElement("cr-dialog-backdrop");
        Polymer({
            created: function() {
                this.isPolyfill = !window.HTMLDialogElement;
                if (this.isPolyfill)
                    this.classList.add("polyfill");
                // <dialog> by default does all work synchronously which is bad
                // because it means hiding a dialog will issue a touch under the
                // button that called .close() in the tap handler since the
                // dialog disappeared in the middle of the touch sequence. It
                // also means unnecessary sync style updates. To fix this we
                // replace the native browser methods with async ones.
                var syncShowModal = this.showModal || function() {
                    this.open = true;
                    this.setAttribute("open", "");
                    document.body.appendChild(backdrop);
                };
                var syncClose = this.close || function() {
                    if (!this.open)
                        return;
                    this.removeAttribute("open");
                    backdrop.remove();
                };
                this.showModal = function() {
                    this.async(function() {
                        syncShowModal.call(this);
                        this.async(function() {
                            // Focus the first input. The browser tries to do
                            // something like this but isn't very good at it.
                            var input = this.querySelector("input, textarea, * /deep/ input, * /deep/ textarea");
                            if (input)
                                input.focus();
                        });
                    });
                };
                this.close = function() {
                    this.async(function() {
                        syncClose.call(this);
                    });
                };
                this.fireCancelEvent = function(event) {
                    event.preventDefault();
                    if (!this.fire("cancel").defaultPrevented)
                        this.close();
                };
            },
        });
    })();
    </script>
</ploymer-element>
